<template>
  <div class="rideorder-content">
    <van-tabs v-model="active" color="rgb(255,153,16)" @change="Suk_change">
      <van-tab title="待取货"></van-tab>
      <van-tab title="待送货"></van-tab>
      <van-tab title="已完成"></van-tab>
    </van-tabs>

    <!-- 下面的是我们订单列表 -->
    <div class="orderlistbox" v-for="(item,index) in items" :key="index">
      <div class="orderlist jiushibox">
        <div class="leftbox">
          <div>
            <span style="color:#000">取货地址</span>
            <span>{{ item.productAddress }}</span>
          </div>
          <div>
            <span>店铺名称：{{ item.productName }}</span>
          </div>
          <div>
            <span>创建时间：{{item.getTime}}</span>
          </div>
          <div>
            <p>电话：{{ item.productPhone }}</p>
          </div>
        </div>

        <div class="middlebox">
          <img src="@/assets/img/icon_dsh_jt.png" alt class="middleimg">
        </div>

        <div class="rightbox">
          <div>
            <span style="color:#000">取货地址</span>
            <span>{{ item.shopAddress }}</span>
          </div>
          <div>
            <span>用户姓名：{{ item.shopName }}</span>
          </div>
          <div>
            <span>预计时间：{{item.appointTime}}</span>
          </div>
          <div>
            <p>电话：{{ item.shopPhone }}</p>
          </div>
        </div>
      </div>
      <div class="footer jiushibox">
        <div class="leftbox">实时订单：{{item.getTime}}</div>
        <div class="rightbox" v-if="active == 0" @click="Suk_goa(item.lat,item.lon,getCaption(item.productAddress))">去导航</div>
        <div class="rightbox" v-if="active == 0" @click="Suk_yesbtn(index)">确认收货</div>
        <div class="rightbox" v-if="active == 1" @click="Suk_go(item.user_lat,item.user_lon,getCaption(item.shopAddress))">去导航</div>
        <div class="rightbox" v-if="active == 1" @click="Suk_yesbtn2(index)">配送完成</div>
        <div style="background:#999" class="rightbox" v-if="active == 2">已完成</div>
      </div>
    </div>
    <div class="noimg" v-if="noimg">
      <img src="@/assets/img/none.png">
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      noimg: false,
      items: [],
      active: 0
    };
  },
  beforeCreate: function() {
    //创建前
  },
  activated() {
    this.menu();
  },
  created: function() {
    this.Suk_getlist(0);
    this.menu();
    //创建后
  },
  beforeMount: function() {
    //挂载前
  },
  mounted: function() {
    //挂载后
  },
  beforeUpdate: function() {
    //更新前
  },
  update: function() {
    //更新后
  },
  methods: {
    // 下面的是配送完成
    Suk_yesbtn2(index) {
      let that = this;
      that.$dialog
        .confirm({
          title: "配送完成",
          message: "确定配送完成？"
        })
        .then(() => {
          that.$toast.loading({
            message: "加载中..."
          });
          var Sukdata = {
            id: that.items[index].id
          };
          console.log(Sukdata);
          that.axios
            .post(
              that.baseUrl + "/ridingOrder/endOrder",
              that.Qs.stringify(Sukdata),
              {
                headers: {
                  "Content-Type": "application/x-www-form-urlencoded"
                }
              }
            )
            .then(function(res) {
              if (res.request.status === 200) {
                if (res.data.meta.code == 200) {
                  that.Suk_getlist(that.active);
                  console.log(res.data);
                  that.$toast.success({
                    message: "接单成功！"
                  });
                } else if (res.data.meta.code == 501) {
                  that.Suk_getlist(that.active);

                }else if(res.data.meta.code == 500){
                	that.Suk_getlist(that.active);
                }
              }
            });
        })
        .catch(() => {
          // on cancel
        });
    },
    getCaption(obj){
      var index=obj.lastIndexOf("区");
      if(index==-1){
        index=obj.lastIndexOf("县");
      }
      if(index==-1){
        index=obj.lastIndexOf("市");
      }
      obj=obj.substring(index+1,obj.length);

      return obj.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
    },
    // 下面的是确认订单
    Suk_yesbtn(index) {
      let that = this;
      // console.log(that.items[index].id,'here')
      that.$toast.loading({
        message: "加载中..."
      });
      var Sukdata = {
        id: that.items[index].id
      };
      // console.log(Sukdata);
      that.axios
        .post(
          that.baseUrl + "/ridingOrder/ridingGet",
          that.Qs.stringify(Sukdata),
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          }
        )
        .then(function(res) {
          if (res.request.status === 200) {
            if (res.data.meta.code == 200) {
              // console.log(res.data);
              that.$toast.success({
                message: "接单成功！"
              });
              that.Suk_getlist(that.active);
            } else if (res.data.meta.code == 501) {
              that.Suk_getlist(that.active);
            }
          }
        });
    },
    Suk_goa(lat,lon,poiname) {
//    alert(lat,lon);
      dsBridge.call("goNavigate", { lat: lat, lon: lon , poiname :poiname});
    },
    Suk_go(lat,lon,poiname) {
//    alert(lat,lon);
      dsBridge.call("goNavigate", { lat: lat, lon: lon , poiname :poiname});
    },
    Suk_change(e) {
      // console.log(e);
      let that = this;
      that.active = e;
      if (e == 0) {
        that.Suk_getlist(0);
      } else if (e == 1) {
        that.Suk_getlist(1);
      } else if (e == 2) {
        that.Suk_getlist(2);
      }
    },
    Suk_getlist(tp) {
      let that = this;
      that.$toast.loading({
        message: "加载中..."
      });
      var Sukdata = {
        rinId: localStorage.getItem("userid"),
        type: tp
      };
      // console.log(Sukdata);
      that.axios
        .post(
          that.baseUrl + "/ridingOrder/myOrderLists",
          that.Qs.stringify(Sukdata),
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          }
        )
        .then(function(res) {
          if (res.request.status === 200) {
            if (res.data.meta.code == 200) {
              console.log(res.data.data, "order")
              if(res.data.data == '骑手不存在'){
                that.$toast({
                  message:'骑手不存在'
                })
              }else if ((res.data.data.list.length !== 0)) {
                that.noimg = false;
                that.items = res.data.data.list;
                that.items.forEach(function(e){
                  e["lon"]=e.address.split(",")[0];
                  e["lat"]=e.address.split(",")[1];
                  e["user_lon"]=e.address.split(",")[2];
                  e["user_lat"]=e.address.split(",")[3];

                });
                that.$toast.clear();
              } else {
                that.items = res.data.data.list;
                that.noimg = true
                that.$toast.clear();
              }
            } else if (res.data.meta.code == 501) {
            }
          }
        });
    },
    menu(e) {
      window.scrollTo(0, 0);
    }
  }
};
</script>
<style lang="scss" scoped>
.rideorder-content {
  font-size: 0.3rem;
  background: #f4f4f4;
  padding-bottom: 3rem;
}
.jiushibox {
  width: 90%;
  margin: 0 auto;
}
.orderlistbox {
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  margin-bottom: 00.3rem;
  background: #fff;
  box-shadow: 0.1rem 0.1rem 0.1rem 0.1rem #e9e9e9;
}
.orderlist {
  margin-top: 0.3rem;
  word-wrap: break-word;
  line-height: 0.65rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .middlebox {
    width: 0.4rem;
    margin-left: 0.3rem;
    margin-right: 0.3rem;
    img {
      width: 100%;
    }
  }
  .leftbox {
    border: 1px dotted rgb(255, 153, 16);
    width: 45%;
    border-radius: 0.2rem;
    div {
      width: 90%;
      margin: 0 auto;
    }
  }
  .rightbox {
    width: 45%;
    border: 1px dotted rgb(255, 153, 16);
    border-radius: 0.2rem;
    div {
      p {
        word-wrap: break-word;
      }
      width: 90%;
      margin: 0 auto;
    }
  }
}

.footer {
  margin-top: 0.3rem;
  display: flex;
  justify-content: space-between;
  .leftbox {
    color: rgb(255, 153, 16);
  }
  .rightbox {
    width: 1.9rem;
    height: 0.7rem;
    background: rgb(255, 153, 16);
    color: #fff;
    text-align: center;
    line-height: 0.7rem;
    border-radius: 0.1rem;
  }
}

.noimg{
  width: 100%;
  img{
    width: 100%
  }
}
</style>
